import { CCol, CProgress, CRow } from "@coreui/react";

import CIcon from "@coreui/icons-react";

import {
  progressGroupExample1,
  progressGroupExample2,
  progressGroupExample3,
} from "./abilities";

export default function learningPartner() {
  return (
    <CRow>
      <CCol xs={12} md={6} xl={6}>
        <CRow>
          <CCol xs={6}>
            <div className="border-start border-start-4 border-start-info py-1 px-3">
              <div className="text-body-secondary text-truncate small">
                New Clients
              </div>
              <div className="fs-5 fw-semibold">9,123</div>
            </div>
          </CCol>
          <CCol xs={6}>
            <div className="border-start border-start-4 border-start-danger py-1 px-3 mb-3">
              <div className="text-body-secondary text-truncate small">
                Recurring Clients
              </div>
              <div className="fs-5 fw-semibold">22,643</div>
            </div>
          </CCol>
        </CRow>
        <hr className="mt-0" />
        {progressGroupExample1.map((item, index) => (
          <div className="progress-group mb-4" key={index}>
            <div className="progress-group-prepend">
              <span className="text-body-secondary small">{item.title}</span>
            </div>
            <div className="progress-group-bars">
              <CProgress thin color="info" value={item.value1} />
              <CProgress thin color="danger" value={item.value2} />
            </div>
          </div>
        ))}
      </CCol>
      <CCol xs={12} md={6} xl={6}>
        <CRow>
          <CCol xs={6}>
            <div className="border-start border-start-4 border-start-warning py-1 px-3 mb-3">
              <div className="text-body-secondary text-truncate small">
                Pageviews
              </div>
              <div className="fs-5 fw-semibold">78,623</div>
            </div>
          </CCol>
          <CCol xs={6}>
            <div className="border-start border-start-4 border-start-success py-1 px-3 mb-3">
              <div className="text-body-secondary text-truncate small">
                Organic
              </div>
              <div className="fs-5 fw-semibold">49,123</div>
            </div>
          </CCol>
        </CRow>

        <hr className="mt-0" />

        {progressGroupExample2.map((item, index) => (
          <div className="progress-group mb-4" key={index}>
            <div className="progress-group-header">
              <CIcon className="me-2" icon={item.icon} size="lg" />
              <span>{item.title}</span>
              <span className="ms-auto fw-semibold">{item.value}%</span>
            </div>
            <div className="progress-group-bars">
              <CProgress thin color="warning" value={item.value} />
            </div>
          </div>
        ))}

        <div className="mb-5"></div>

        {progressGroupExample3.map((item, index) => (
          <div className="progress-group" key={index}>
            <div className="progress-group-header">
              <CIcon className="me-2" icon={item.icon} size="lg" />
              <span>{item.title}</span>
              <span className="ms-auto fw-semibold">
                {item.value}{" "}
                <span className="text-body-secondary small">
                  ({item.percent}%)
                </span>
              </span>
            </div>
            <div className="progress-group-bars">
              <CProgress thin color="success" value={item.percent} />
            </div>
          </div>
        ))}
      </CCol>
    </CRow>
  );
}
